<template>
	<view class="search">
		<view class="serch-int">
			<u-search placeholder="搜索" v-model="sousuo" :show-action="false" bg-color="#F5F5F5"
				search-icon-color="#BEBEBE" class="input" @search="dosearch">
			</u-search>
			<view class="cancel" @click="getSearch">搜索</view>
		</view>
		<view class="Popular">
			<view class="title">热门搜索</view>
			<view class="tag-box">
				<view class="tags" v-for="(item,i) in HotSearch" :key="i" @click="dotags(item)">{{item}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { ResHotSearch, ResSearch } from '@/untils/api.js'
	export default {
		data() {
			return {
				sousuo: '',
				HotSearch: [],
				searchdata: []

			}
		},
		onLoad() {
			this.getHotSearch()
		},
		methods: {
			dosearch() {
				this.getSearch()
			},
			dotags(item) {
				this.sousuo = item
			},
			async getSearch() {
				// 非空判断
				if (!this.sousuo) return uni.$showMsg('内容不能为空')
				// 发送请求
				let searchObj = {
					keywords: this.sousuo
				}
				const { data: res } = await ResSearch(searchObj)
				if (res.code != 1) return uni.$showMsg(res.msg)
				if (!res.data.data[0]) return uni.$showMsg('搜索内容不存在')
				let searchdata = res.data.category[0]
				let serigdata = res.data.data
				console.log(res, '2222');
				this.sousuo = ''
				// 页面跳转
				uni.navigateTo({
					url: `/pages/Home/Searchlist?data=${JSON.stringify(searchdata)}&datatwo=${JSON.stringify(serigdata)}`
					// url: `/pages/Serve/ServeList?data=${JSON.stringify(this.searchdata)}&idtwo=${this.searchdata[0].id}$searis=false`
				})
			},
			async getHotSearch() {
				const { data: res } = await ResHotSearch()
				if (res.code != 1) return uni.$showMsg(res.msg)
				this.HotSearch = res.data
				console.log(res, '热门搜素');
			}
		}
	}
</script>

<style lang="scss" scoped>
	.search {
		padding: 0 30rpx;

		.serch-int {
			display: flex;
			align-items: center;
			z-index: 99;

			.input {
				flex: 1;
			}

			.cancel {
				width: 100rpx;
				text-align: center;
				font-size: 32rpx;
				color: #CE4856;
			}

		}

		.Popular {
			.title {
				font-size: 28rpx;
				color: #606060;
				margin: 38rpx 0 26rpx;
			}

			.tag-box {
				display: flex;

				.tags {
					height: 65rpx;
					font-size: 26rpx;
					padding: 0 10rpx;
					line-height: 65rpx;
					color: #9A9A9A;
					background: #F7F7F7;
					border-radius: 9rpx;
					margin-right: 26rpx;
				}
			}
		}
	}
</style>
